<template>
<!-- Home里的编辑推荐里的歌单点击进去的页面 -->
    <div class="song" v-if="playlist">
        <HomeMusicItemSongHead :detail="playlist"/>
        <div class="center">歌曲列表</div>
        <ul  @click="$emit('update:gedan', playlist.tracks)">
            <HomeMusicItemSongBody 
                v-for="(item,index) in playlist.tracks" 
                :key="item.id" 
                :item="item" 
                :order="index+1"
                @click.native="$emit('update:currentPlaySong',item)"
                :currentPlaySongId="currentPlaySongId"
                :playing="playing"
            />
        </ul>
        <p class="center">最新评论({{total}})</p>
        <ul class="comment">
            <Comment v-for="comment in comments" :key="comment.commentId" :comment="comment"/>
        </ul>
    </div>
</template>

<script>
import HomeMusicItemSongHead from '@/components/HomeMusicItemSongHead.vue'
import HomeMusicItemSongBody from '@/components/HomeMusicItemSongBody.vue'
import Comment from '@/components/Comment.vue'


export default {
    name:'homeMusicItemSong',
    components: {
        HomeMusicItemSongHead,
        HomeMusicItemSongBody,
        Comment,
    },
    props:['currentPlaySongId','playing'],
    data: function(){
        return{
            comments: [],
            gedanId: null,
            total: null,
            playlist: null,
        }
    },
    created: function () {
        this.axios
            .get("https://apis.netstart.cn/music/playlist/detail?id=" + this.$route.query.id)
            .then(res => {
                this.playlist = res.data.playlist;
            });
        this.axios
            .get("https://apis.netstart.cn/music/comment/playlist?limit=10&id=" + this.$route.query.id)
            .then(res => {
                this.comments = res.data.comments;
                this.total = res.data.total;
            });
            
    },

    /* methods: {
        songList: function (id) {
        this.axios
            .get("https://apis.netstart.cn/music/playlist/detail?id=" + id)
            .then((res) => {
                this.playlist = res.data.playlist;
            });
        },
    }, */
}
</script>

<style lang="less" scoped>
    .song{
        .center{
            height: 23px;
            line-height: 23px;
            width: 100%;
            padding: 0 10px;
            background-color: #eeeff0;
            font-size: 13px;
        }
    }
</style>